<template>
  <div class="common">
      <div v-show="tabListShow" class="head-tab">
        <zan-tab
          :scroll="scroll"
          :list="tabList"
          :selected-id="selectedId" 
          @tabchange="handleTabChange"
        />
      </div>   
      <div class="banner-box" v-if="bannerImg">
          <image  class="img"  mode="scaleToFill"  :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+bannerImg"  ></image>
      </div>
      <div class="content-box clear-both">
         <wen-zhang @jump="wZDetail" v-for="(item,index) in msgList" :key="index" :item="item"></wen-zhang> 
      </div>
      
      <div class="text-center loadmore" v-if="loadmore">没有更多..</div>
  </div>
</template>

<script>
import wenZhang from '@/components/tpl/wen-zhang' 
import * as api  from '@/utils/api'
import {formatTab}  from '@/utils/method' 
export default {
  onLoad(){
    this.getTabList();
  },
  components: { 
    wenZhang
  }, 
  data () {
    return {
      tabListShow:false,
      tabList:[],
      tabArrList:[], //tabs 数据
      selectedId: '',
      scroll:true, //是否能滚动
      resource_type:-1,   
      msgList:[],//文章详情
      offset:0,
      limit:10,
      count:0,  //总条数
      loadmore:false,

      bannerImg:'',
    }
  }, 
  methods:{
    getTabList(){
      let vm =this;
      vm.resource_type=-1;
      vm.tabList=[];
      let body={
        model: "Tabs",
        condition:{
          type: 4, 
        }
      };
      api.commonSite(body).then(res=>{ 
          let arrList=[];
          if(res.data.code==200){ 
            res.data.data.count>4?vm.scroll=true:vm.scroll=false;
            res.data.data.count!=0?vm.tabListShow=true:vm.tabListShow=false;
            res.data.data.data.forEach((item,index)=>{ 
              if(index==0)vm.selectedId=`${item.tab_id}/${item.resource_type}`;
              let obj=item;
              obj.id=`${item.tab_id}/${item.resource_type}`;
              arrList.push(obj);
            }); 
            vm.resource_type=arrList[0].resource_type; 
            vm.getPrdList(formatTab('id',vm.selectedId));
            
          } 
          vm.tabList=arrList;
          vm.bannerImg=vm.tabList[0].images;
      });
    },
    getPrdList(tabId,val){
      let vm =this;
      let body={
        model: "Articles",
        condition:{
          tab_id: tabId, 
        },
        with:{ 
            "0":"tabs", 
        },
        offset:vm.offset,
        limit:vm.limit
      };
      api.commonSite(body).then(res=>{  
          if(res.data.code==200){ 
            vm.count=res.data.data.count; 
            if(val=='down'){  
              res.data.data.data.forEach((item,index)=>{
                vm.msgList.push(item);  
              });
            }else{
                vm.msgList=res.data.data.data; 
            } 
            console.log(vm.msgList); 
          }  
      });
    }, 
    handleTabChange(e) {  
      console.log(formatTab('id',e.mp.detail));
      let vm = this; 
      vm.tabList.forEach((item,index)=>{ 
        if(item.tab_id==formatTab('id',e.mp.detail)){
          vm.bannerImg=vm.tabList[index].images;
        }
      }); 
      this.offset=0;
      this.limit=10;
      this.count=0;  //总条数
      this.loadmore=false;
      
      this.selectedId=e.mp.detail;
      this.getPrdList(formatTab('id',e.mp.detail));
      this.resource_type=formatTab('type',e.mp.detail); 
    },
    // //跳转详情
    // jumpDetail(item){
    //   let url = `./../article-detail/main?artId=${item.id}`;
    //   wx.navigateTo({url}) 
    // },
    //文章跳转详情
    wZDetail(item){
      let url = `./../article-detail/main?artId=${item.article_id}`;
      wx.navigateTo({url}) 
    },
  },
  // 上拉加载，拉到底部触发
  onReachBottom() {
    this.offset+=this.limit;
    if(this.count==this.vidList.length)this.loadmore=true;
    if(this.count>this.vidList.length){
      this.getPrdList(formatTab('id',this.selectedId),'down');
    } 
  },
  created () {
    
  }
}

</script>

<style scoped lang="scss">
.common{
  padding-top:90rpx;
  .head-tab{
    position:fixed;
    top:0;
    width:100%;
    height:90rpx;
    background:#fff; 
    z-index:20;
  }
  .banner-box{
      width:100%;
      height:240rpx;
      padding:0 20rpx;
      margin:20rpx 0;
      box-sizing:border-box;
      .img{
        width:100%; 
        height:100%;
        border-radius:20rpx;
      }
  }
  .content-box{
    padding:20rpx;
    box-sizing:border-box;
  }
  .loadmore{
    font-size:28rpx;
    color:#ccc; 
    padding-bottom:40rpx;
  }
}

</style>
